<template>
  <my-card class="card">
    <!-- <el-button type="primary" @click="hangleParams">点击进行路由传参</el-button> -->
    <el-button type="primary" @click="getParams">点击获取路由参数</el-button>
    <h2>{{ routerParams }}</h2>
  </my-card>
</template>

<script lang="ts" setup>
import MyCard from '@/components/card/MyCard.vue'
import { ref } from 'vue'

// 路由中通过state方式传参
// import { useRouter } from 'vue-router'
// const router = useRouter()
// const hangleParams = () => {
//   router.push({
//     path: '/routerParams',
//     state: {
//       name: '这是路由中传过来的参数'
//     }
//   })
// }
const routerParams = ref<string>('')

// 这个参数是在公共组件中传过来的
const getParams = () => {
  console.log(history)
  routerParams.value = history?.state.name
}
</script>
<style lang="scss" scoped>
  .card {
    margin-bottom: 20px;
  }
</style>
